<template>
  <div class="box">
    <div><MyTop  name="我的经验" dec="根据亲身经历发布疾病经验"></MyTop></div>
    <div>
      <p class="return" @click="ret"><i class="el-icon-arrow-left"></i>返回</p>
      <div class="item">
         <el-row>
          <!-- <el-col :span="4"></el-col> -->
          <el-col :span="20" :offset="4"
            ><el-col :span="8" :offset="6">
              <el-input
                placeholder="请输入标签名称"
                v-model="label"
                class="input"
              >
                <el-button @click.capture="searchFn" slot="append">
              <i class="el-icon-search searchIcon" ></i>
            </el-button>
              </el-input> </el-col
          ></el-col>
        </el-row>

        <el-row style="marginTop:30px">
          <el-col :span="4">经验标签</el-col>
          <el-col :span="18">
            <div class="label">
              <span
                v-for="(item, index) in choseArr"
                :key="index"
                :class="colorArr[index % 4]"
                >{{ item }}<i class="el-icon-close" @click="del(item)"></i
              ></span>
            </div>
          </el-col>
          <el-col :span="2" class="more"
            ><el-button type="primary" @click="save">确定</el-button></el-col
          >
        </el-row>
       
      </div>
      <!-- <div class="item">
        
        <el-row class="tit"> </el-row>
        <div class="fenlei">
          <el-row>
            <el-col :span="3" class="tit">部位一级分类：</el-col>
            <el-col :span="21">
              <span
                v-for="item in staCla.pos"
                :key="item.id"
                @click="selectYiJi(item.id)"
                :class="friInd == item.id ? 'yiji yijiAc' : 'yiji'"
                ><img :src="item.src" alt="" />{{ item.name }}</span
              >
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3" class="tit">科室一级分类：</el-col>
            <el-col :span="21">
              <span
                v-for="item in staCla.dep"
                :key="item.id"
                @click="selectYiJi(item.id)"
                :class="friInd == item.id ? 'yiji yijiAc' : 'yiji'"
                ><img :src="item.src" alt="" />{{ item.name }}</span
              >
            </el-col>
          </el-row>
        </div>
      </div> -->
      <div class="item">
        <!-- <el-row>
          <el-col :span="4">搜索结果</el-col>
          <el-col :span="20"></el-col>
        </el-row> -->
        <!-- <el-row class="label-area">
          <el-col :span="12" class="line">
            <div class="dis">
              <span v-for="item in staCla" :key="item.id" class="yiji" @click="addClose(item.name)"
                ><img :src="item.iconImg" alt="" />{{ item.name
                }}<i class="el-icon-plus" @click="del(index)"></i
              ></span>
            </div>
            <p class="label-title">一级分类</p>
          </el-col>
          <el-col :span="12">
            <div class="dis">
              <span v-for="(item, index) in disArr" :key="index" @click="addClose(item.name)"
                >{{ item.name }}<i class="el-icon-plus" @click="del(index)"></i
              ></span>
            </div>
            <p class="label-title">二级分类</p>
          </el-col>
        </el-row> -->
        <!-- <el-row>
          <el-col :span="4" style="margin:20px">疾病结果</el-col>
          <el-col :span="20"> </el-col>
        </el-row> -->
        <div class="disarea">
          <div v-for="item,index in guList" :key="index" class="guitem" >
            <el-row>
              <el-col :span="22">
                <p>{{ item}}</p>
            <!-- <div> -->
              <!-- <span v-for="item2 in item.label"  :key="item2">{{ item2 }}</span> -->
            <!-- </div> -->
              </el-col>
              <el-col :span="2" class="dis-icon">
                 <i class="el-icon-plus" @click="addClose(item)"></i
              >
              </el-col>
            </el-row>
            
           
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MyTop from "../components/MyTop.vue";
export default {
  components: {
    MyTop,
  },
  data() {
    return {
      desc: "", //详细内容
      label: "", //标题
      inputBlog: {},
      choseArr: ["头部", "颅脑"],
      colorArr: ["bi-bg", "yi-bg", "ri-bg", "gi-bg"],
      disArr: [],
      staCla: [],
      guList: [
        {
          id: 1,
          name: "高血压",
          label: ["腹部", "头部"],
        },
        {
          id: 2,
          name: "脑出血",
          label: ["颅脑", "头部"],
        },
      ],
      //上传照片
      dialogImageUrl: "",
      dialogVisible: false,
      page:1
    };
  },
  created(){
    this.choseArr= this.$route.query.choseArr
    //获取一级分类
    let c1=this.$getStorage("classifyTree").partTree;
    let c2=this.$getStorage("classifyTree").departmentTree
    this.staCla =[...c1,...c2]
    this.getClassify2()
  },
  methods: {
    searchFn(){//搜索
      this.page=this.page+1
      this.$axios({
        url: "/sickness/searchTge",
        method: "post",
        data: this.$qs.stringify({
          name:this.label
        }),
      }).then((res) => {
        console.log(res)
         if (res.code == "200") {
           this.guList=res.data
         }
      })
      this.getClassify2();
    },
    getClassify2(){
      this.$axios({
        url: "/sickness/getAll",
        method: "post",
        data: this.$qs.stringify({
          page:this.page,
          size: 10,
        }),
      }).then((res) => {
        console.log(res)
         if (res.code == "200") {
           this.guList=res.data.map(item=>{
             return item.name
           })
         }
      })
      this.$axios({
        url: "/sickness/selectByPage",
        method: "get",
        params: {
          page: this.page,
          size: 10,
        },
      }).then((res) => {
        console.log(res)
         if (res.code == "200") {
           if(res.data.length<5){
             this.page=this.page-2;
            this.searchFn()
           }
           this.disArr=res.data.map(item=>{
             return {...item,name:item.departmentName}
           })
         }
      })
    },
    ret(){
      history.go(-1)
    },
    save(){
      this.$router.push({path:"/main/releaseexp",query:{choseArr:this.choseArr}});
    },
     //添加tag
    addClose(name) {
      if (!this.choseArr||!this.choseArr.find((item) => item == name)) {
        if(!this.choseArr){
          this.choseArr=[name]
        }else{
          this.choseArr = [...this.choseArr, name];
        }
        
      }
    },
    //删除tag
    del(name) {
      this.choseArr = this.choseArr.filter((item) => {
        return item != name;
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../less/relexp.less");
.box{
  padding: 0  0 30px 0;
}
.fenlei {
  margin-top: 15px;

  text-align: left;
  .tit {
    line-height: 40px;
    text-align: right;
    color: #999;
  }
  .yiji {
    text-align: left;
    display: inline-block;
    line-height: 30px;
    font-size: 18px;
    margin: 5px 8px;
    padding: 0 10px;
    border-radius: 5px;
    cursor: pointer;
    img {
      height: 35px;
      vertical-align: middle;
      margin-right: 5px;
    }
  }
  .yijiAc {
    background-color: #9ba5bb;
    color: white;
  }
}
::v-deep .input {
  margin: 0px 0;
  height: 40px;
  border: 1px solid #312a6d;
  border-radius: 25px;
  overflow: hidden;
  & input {
    height: 40px !important;
    font-size: 18px;
    color: black;
    border-radius: 25px 0 0 25px;
    border: none;
  }
  & input::placeholder {
    font-size: 18px;
    color: #7a7a79;
    line-height: 50px;
  }
}
::v-deep .el-input-group__append {
  width: 45px;
  background-color: #312a6d;
  color: white;
  border: none;
}
.disarea{
  display: flex;
  flex-wrap: wrap;
  user-select: none;
}
.guitem {
  background-color: #dedee7;
  border-radius: 5px;
  margin: 10px 20px 10px 10px;
  padding: 10px 30px 10px 10px;
  text-align: left;
  box-sizing: border-box;

  p {
    font-size: 18px;
  }
  span {
    background-color: #9ba5bb;
    color: white;
    font-size: 8px;
    border-radius: 5px;
    padding: 2px;
    margin: 5px 2px;
    text-align: left;
  }
  .dis-icon{
    opacity: 0;
    line-height: 30px;
    color: #1890ff;
    &>i{
      font-size: 20px;
    }
  }
  &:hover .dis-icon{
    opacity: 1;
  }
}
.dis {
        height: 220px !important; 
        span {
          margin: 15px 10px;
          display: inline-block;
          font-size: 16px;
          user-select: none;
          i {
            margin-left: 6px;
            opacity: 0;
          }
          &:hover > i {
            opacity: 1;
          }
        }
      }
      .return{
        text-align: left;
        margin:20px 0 0;
        font-size: 20px;
        color: #999;
        cursor: pointer;
      }
</style>